import React from 'react';

import 'amis/lib/themes/cxd.css';
import 'amis/lib/helper.css';
import 'amis/sdk/iconfont.css';

import useAmis from '@/uses/useAmis';

const APP = () => {
  const TestComponent = useAmis({
    "type": "page",
    "body": [
      {
        "type": "crud",
        "api": {
          "method": "post",
          "url": "/api/v1/customer/list",
          "data": {
            "page": '${page}',
            "size": "${perPage}",
            "sort": "${orderBy ? `${orderBy}:${orderDir}` : 'createdAt:desc'}",
            "keywords": "${keywords}",
            "phone": "${phone}",
          },
        },
        "autoGenerateFilter": {
          "columnsNum": 2,
          "showBtnToolbar": false
        },
        "headerToolbar": [
          "bulkActions",
          {
            "type": "reload",
            "align": "right",
            "icon": "iconfont icon-refresh",
            "label": "刷新",
            "tooltip": "",
          },
          {
            "type": "export-csv",
            "label": "全量导出",
            "api": {
              "method": "post",
              "url": "/api/v1/customer/list",
              "data": {
                "page": '${page}',
                "size": "${perPage}",
                "sort": "${orderBy ? `${orderBy}:${orderDir}` : 'createdAt:desc'}",
                "keywords": "${keywords}",
                "phone": "${phone}",
              },
            }
          },
          {
            "label": "新增",
            "type": "button",
            "align": "right",
            "actionType": "drawer",
            "level": "primary",
            "className": "m-b-sm",
            "drawer": {
              "title": "新增表单",
              "body": {
                "type": "form",
                "api": "post:/amis/api/mock2/sample",
                "body": [
                  {
                    "type": "input-text",
                    "name": "engine",
                    "label": "Engine"
                  },
                  {
                    "type": "input-text",
                    "name": "browser",
                    "label": "Browser"
                  }
                ]
              }
            }
          },
        ],
        "bulkActions": [
          {
            "label": "批量删除",
            "actionType": "ajax",
            "api": "delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/${ids|raw}",
            "confirmText": "确定要批量删除?"
          },
        ],
        "syncLocation": false,
        "columns": [
          {
            "name": "id",
            "label": "ID"
          },
          {
            "name": "name",
            "label": "名称",
            "sortable": true,
            "searchable": {
              "type": "input-number",
              "mode": "horizontal",
              "placeholder": "请输入",
            }
          },
          {
            "name": "phone",
            "label": "电话",
            "searchable": {
              "type": "input-text",
              "placeholder": "请输入",
              "mode": "horizontal"
            }
          },
          {
            "name": "remark",
            "label": "备注"
          },
          {
            "name": "createdAt",
            "label": "创建时间",
            "sortable": true,
            "type": "date",
            "fromNow": true,
            "valueFormat": "x"
          },
          {
            "name": "createdBy",
            "label": "创建人"
          },
          {
            "type": "operation",
            "label": "操作",
            "buttons": [
              {
                "label": "修改",
                "type": "button",
                "actionType": "drawer",
                "drawer": {
                  "title": "新增表单",
                  "body": {
                    "type": "form",
                    "initApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/${id}",
                    "api": "post:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/${id}",
                    "body": [
                      {
                        "type": "input-text",
                        "name": "engine",
                        "label": "Engine"
                      },
                      {
                        "type": "input-text",
                        "name": "browser",
                        "label": "Browser"
                      }
                    ]
                  }
                }
              },
              {
                "label": "删除",
                "type": "button",
                "actionType": "ajax",
                "level": "danger",
                "confirmText": "确认要删除？",
                "api": "delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/${id}"
              }
            ]
          }
        ]
      }
    ]
  });

  return (
    <>
      <TestComponent />
    </>
  );
}

export default APP;
